<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>{{ title }}</span>
            </div>
        </template>
      <el-table v-if="tableData" :data="tableData" style="width: 100%">
            <el-table-column
                v-for="{ prop, label } in colConfigs"
                :key="prop"
                :prop="prop"
                :label="label"
                width="180">
                <template v-if="prop == 'visible'" #default="scope">
                    <el-switch v-model="scope.row.visible" @change="changeSwitch($event, scope.row.name)" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button plain @click="edit(scope.row.name)">
                        <el-icon><EditPen /></el-icon>
                    </el-button>
                    <el-button plain @click="files(scope.row.name)">
                        <el-icon><Files /></el-icon>
                    </el-button>
                    <el-button plain @click="monitor(scope.row.name)">
                        <el-icon><Monitor /></el-icon>
                    </el-button>
                    <el-button plain @click="school(scope.row.name)">
                        <el-icon><School /></el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <span v-else-if="content">{{ content }}</span>
        <span v-show="showMessage.type && showMessage.course">正在{{ showMessage.type + showMessage.course }}</span>
    </el-card>
</template>

<script>
    import { ElMessage } from 'element-plus';
    import { EditPen, Files, Monitor, School } from '@element-plus/icons-vue';

    export default {
    name: 'XXK',
    props: {
        title: {
            type: String,
            default: '标题'
        },
        content: {
            type: String,
            default: '主体内容'
        },
        tableData: {
            type: Array
        }
    },
    components: {
        EditPen, Files, Monitor, School
    },
    data() {
        return {
            colConfigs: [
                { prop: 'index', label: '序号' },
                { prop: 'name', label: '课程名称' },
                { prop: 'beginTime', label: '创建时间' },
                { prop: 'visible', label: '可见状态' }
            ],
            showMessage: {
                type: '',
                course: ''
            }
        }
    },
    methods: {
        edit(name) {
            this.showMessage.type = '编辑';
            this.showMessage.course = name;   
        },
        files(name) {
            this.showMessage.type = '资源管理';
            this.showMessage.course = name;
        },
        monitor(name) {
            this.showMessage.type = '资源编排';
            this.showMessage.course = name;
        },
        school(name) {
            this.showMessage.type = '开课';
            this.showMessage.course = name;
        },
        changeSwitch(newVal, name) {
            if (newVal == true) {
                ElMessage.success(`${name}现在是可见的`);
            } else {
                ElMessage.warning(`${name}现在是不可见的`);
            }
        }
    }
}
</script>
<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-card {
    min-height: 45%;
}
</style>